<template>
	<view class="root-box">
		<view class="content" v-if="orderDetail">
			
		    <view class="loop-item">
				<view class="top-box">
					<view class="fzW" v-if="orderDetail.takes_order_status == 4">订单已完成</view>
					<view class="fzW cred" v-else-if="orderDetail.status == 4">订单已取消</view>
					<view class="fzW cred" v-else-if="orderDetail.takes_order_status == 5">订单已售后</view>
				</view>
				<view class="loop-body">
					<view class="loop-body-left">
						 <image class="full-image" :src="orderDetail.product_image" mode="scaleToFill"></image>
					</view>
					<view class="loop-body-right">
						<view class="loop-body-item">
							<view class="lltem-title">{{orderDetail.product_name}}</view>
							<view class="lltem-money">￥{{orderDetail.total_price}}</view>
						</view>
						<view class="loop-body-item">
							<view class="font-small"><text>{{orderDetail.spec_values}}</text></view>
							<view class="font-small"><text>x{{orderDetail.num}}</text></view>
						</view>
					</view>
				</view>
				
				<view class="loop-footer">
					<view class="footer-icon">
						<tui-icon custom-prefix="lishitong" name="lishitong-dingwei" size="20" color="red"></tui-icon>
					</view>
					<view class="footer-text-box">
						{{orderDetail.address_address}}
					</view>
				</view>
				
				<view class="bz-text-box">
					顾客备注：{{orderDetail.remark}}
				</view>
				
				
			</view>
			<view class="loop-item mt-10">
				<view class="details-text-default-box">
					<view class="details-text-title">订单收入</view>
					<view class="details-text-title">￥{{orderDetail.total_price}}</view>
				</view>
				
				<view class="details-text-default-box mt-20">
					<view class="details-text">上门服务费</view>
					<view class="details-text">￥{{orderDetail.door_service_fee||0}}</view>
				</view>
				<view class="details-text-default-box mt-10">
					<view class="details-text">节假日调度费</view>
					<view class="details-text">￥{{orderDetail.night_price}}</view>
				</view>
				
			</view>
			
			<view class="loop-item mt-10">
				<view class="details-text-default-box">
					<view class="details-text-title">订单信息</view>
					
				</view>
				
				<view class="details-text-default-box mt-20">
					<view class="details-text">服务时间</view>
					<view class="details-text flex">
						<text class="mr-10"> {{orderDetail.acceptance_time}} </text>
						<uv-icon name="clock" color="red" size="16" />
					</view>
				</view>
				<view class="liuceng-box mt-15">
					<view class="liuceng-item">
						<view>接单</view>
						<view class="ml-30">{{orderDetail.acceptance_time}}</view>
					</view>
					<view class="liuceng-item">
						<view class="liuceng-icon"><uv-icon name="play-right-fill" color="#aaa" size="14"></uv-icon></view>
					</view>
					<view class="liuceng-item">
						<view>上门服务</view>
						<view class="ml-30">{{orderDetail.to_door_time||'--'}}</view>
					</view>
					<view class="liuceng-item">
						<view class="liuceng-icon"><uv-icon name="play-right-fill" color="#aaa" size="14"></uv-icon></view>
					</view>
					<view class="liuceng-item">
						<view>完成</view>
						<view class="ml-30">{{orderDetail.takes_completion_time||'--'}}</view>
					</view>
				</view>
				
				
				<view class="details-text-default-box mt-15">
					<view class="details-text">订单号码</view>
					<view class="details-text flex">
						<text class="mr-10"> {{orderDetail.order_no}} </text>
						<text class="clink" @click = "cpOrderCode(orderDetail.order_no)"> 复制 </text>             
					</view>
				</view>
				
				<view class="bt-box" v-if="orderDetail.takes_order_status==0">
					<view class="bt-item-box">
						<view class="bt-item-1"  @click.stop="onAction(2)">取消</view>
						<view class="bt-item-2" @click.stop="onAction(1)">接受</view>
					</view>
				</view>
				
				<view class="bt-box mt-20" v-if="orderDetail.takes_order_status==1">
					<view class="bt-item-box" @click.stop="onConfirm">
						<view class="bt-item-3">确定</view>
					</view>
				</view>
				
				<view class="action-box mt-20" v-if="orderDetail.takes_order_status==2">
					<view class="icon-box"  @click.stop="onOpenMap">
						<view><tui-icon custom-prefix="lishitong" name="lishitong-dingwei" size="20" color="#111"></tui-icon></view>
						<view class="icon-title">导航</view>
					</view>
					<view class="icon-fix"></view>
					<view class="icon-box" @click.stop="makeCall">
						<view><tui-icon custom-prefix="lishitong" name="lishitong-dianhua" size="20" color="#111"></tui-icon></view>
						<view class="icon-title">联系客户</view>
					</view>
					<view class="bt-action-box"  @click.stop="onPostStartServer">
						<view class="bt-action-item">上报位置开始服务</view>
					</view>
				</view>
				
				<view class="bt-box mt-20" v-if="orderDetail.takes_order_status==3">
					<view class="bt-item-box">
						<!-- <view class="bt-item-1-box">
						<view class="bt-item-1">
							<tui-icon custom-prefix="lishitong" name="lishitong-paizhao" size="20" color="#111"></tui-icon>
							<text class="ml-20">上传照片</text>
						</view>
						</view> -->
						<view class="bt-item-2 ml-20" @click.stop="onEndServer">完成任务</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="bottom-box" v-if="orderDetail.takes_order_status==4 || orderDetail.takes_order_status==5 || orderDetail.status==4">
			<view class="bottom-item">
				<view><tui-icon custom-prefix="lishitong" name="lishitong-dianhua" size="20" color="#111"></tui-icon></view>
				<view class="bottom-item-txt">联系</view>
			</view>
			
			<view class="bottom-item">
				<view class="bottom-item-fix"></view>
			</view>
			
			<view class="bottom-item">
				<view><tui-icon custom-prefix="lishitong" name="lishitong-wenti" size="26" color="#111"></tui-icon></view>
				<view class="bottom-item-txt">遇到问题</view>
			</view>
			
		</view>
		<uv-popup ref="uvPopupServerTip" round="10" :closeOnClickOverlay="false">
			<serverErrorTip @closeSelfPopup="onCloseServerTipPopup" @confirmReach="onConfirmReach" 
			:orderId="orderId" :address="selfOrderAddress" />
		</uv-popup>
		
		<uv-popup ref="uvPopupServerRecordTip" round="10" :closeOnClickOverlay="false" :closeable="true"
			closeIconPos="top-right" @change="serverRecordTipChange">
			<serverRecordTip />
		</uv-popup>
		
		<uv-popup ref="uvPopupServerEndTip" round="10" :closeOnClickOverlay="false" :closeable="true"
			closeIconPos="top-right">
			<serverEndTip @closeSelfAndUpload="onCloseSelfAndUpload" :orderId="orderId"/>
		</uv-popup>
		
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	import {
		onLoad,
		onReachBottom,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	
	import {
		toDoOrderDetail,
		technicianAcceptOrReject,
		technicianConfirmNewTask,
		technicianConfirmReportLocation
	} from '@/api/other.js'
	
	import serverErrorTip from './components/server_error_tip.vue'
	import serverRecordTip from './components/server_record_tip.vue'
	import serverEndTip from './components/server_end_tip.vue'
	import skilledNavbar from './components/skilled_navbar.vue'
	import MapNavigator from '@/util/MapNavigator';
	import {
		navigate
	} from '@/util/tools.js';
	
	const orderId=ref(0)
    const orderDetail=ref({})
    const currentTab = ref(0)
	const selfOrderAddress=ref('')
	const uvPopupServerEndTip = ref(null)
	const uvPopupServerRecordTip = ref(null)
	const uvPopupServerTip = ref(null)
	
	const cpOrderCode = (order_no) => {
		uni.setClipboardData({
			data: order_no,
			success: function() {
				uni.$uv.toast('复制成功')
			}
		})
	}
	
	const onAction= async (takes_order_status)=>{
		const res = await technicianAcceptOrReject({order_id:orderId.value,takes_order_status})
		if(res.code==200){
			let url='';
			if(takes_order_status===1){
				uni.$uv.toast('接单成功')
				await refreshPage()
			}else{
				url='/pages-public/operation_result?status=warning&title=拒绝订单&desc=您已拒绝服务'
				navigate(url)
			}
		}else{
			uni.$uv.toast('操作发生错误')
		}
	}
	
	const refreshPage = async () => {
		const result = await toDoOrderDetail({id:orderId.value});
		if (result.code == 200) {
			orderDetail.value=result.result
			selfOrderAddress.value=orderDetail.value.address_address
		}
	}
	
	onLoad( async (options) => {
		if (options.id) {
			orderId.value = decodeURIComponent(options.id)
		}
	})
	
	onShow( async () => {
		await refreshPage()
	})
	
	const makeCall = () => {
		uni.makePhoneCall({
		  phoneNumber: orderDetail.value.address_tel, // 要拨打的电话号码
		  success: function () {
		    console.log('成功发起通话');
		  },
		  fail: function (err) {
		    console.error('打电话失败', err);
		    // 常见错误：用户拒绝授权、号码格式错误、设备不支持等
		    uni.showToast({
		      title: '拨号失败',
		      icon: 'none'
		    });
		  }
		});
		
	}
	
	const onOpenMap = () => {
		const navigator = new MapNavigator(orderDetail.value.address_address, orderDetail.value.address_lat, orderDetail.value.address_lng, orderDetail.value.address_address);
		navigator.navigateToMap();
	}
	
	
	const onCloseServerTipPopup = () => {
		uvPopupServerTip.value?.close()
	}
	
	const onConfirmReach=()=>{
		uvPopupServerTip.value?.close()
		onUpLocal()
	}
	
	//关闭提示弹窗去上传图片
	const onCloseSelfAndUpload = () => {
		uvPopupServerEndTip.value?.close()
		navigate('/pages-skilled/order_upload?id='+orderId.value)
	}
	
	//确定订单
	const onActionNewTask= async ()=>{
		const res = await technicianConfirmNewTask({order_id:orderId.value})
		if(res.code==200){
			uni.$uv.toast('确认订单成功')
			await refreshPage()
		}else{
			uni.$uv.toast('操作发生错误')
		}
	}
	//上报位置开始服务
	const onUpLocal= async ()=>{
		const res = await technicianConfirmReportLocation({order_id:orderId.value})
		if(res.code==200){
			uni.$uv.toast('上报位置成功')
			await refreshPage()
		}else{
			uni.$uv.toast('操作发生错误')
		}
	}
	
	//判断技工当前位置是否符合订单位置
	const isAtOrderLocal=()=>{
		return false;
	}
	
	//打开确定订单弹窗
	const onConfirm = () => {
		//uvPopupServerTip.value?.open('center')
		onActionNewTask()
	}
	
	//打开上报位置弹窗
	const onPostStartServer = () => {
		let isAtOrderLocalVal = isAtOrderLocal()
		if(isAtOrderLocalVal){
			uvPopupServerRecordTip.value?.open('center')
		}else{
			uvPopupServerTip.value?.open('center')
		}
	}
	//监听上报位置弹窗开关
	const serverRecordTipChange=(e)=>{
		if(!e.show){
			onUpLocal()
		}
	}
	//打开完成订单弹窗
	const onEndServer = () => {
		uvPopupServerEndTip.value?.open('center')
	}
	//去上传图片
	const onUploadPic = () => {
		navigate('/pages-skilled/order_upload')
	}
	

	
	
	
	
</script>
<style>
	
	
</style>
<style lang="scss" scoped>
	.root-box {
		background-color: #efefef;
		min-height:100vh;
		padding-top: 10upx;
	    .content {
			padding: 0 20rpx;
			box-sizing: border-box;

		}
	}
	
	.loop-item{
		
		box-sizing: border-box;
		padding: 20upx;
		border-radius: 15upx;
		background-color: #fff;
	    width: 100%;
	}
	
	.loop-item-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
	}
	.font-small{
		font-size: 20upx;
		color: #666;
	}
	.lable-box{
		border-radius: 8upx;
		background-color: #ffd6da;
		padding: 0 10upx;
		color: red;
		font-size: 15upx;
		line-height: 32upx;
	}
	.order-on{
		margin-left: 10upx;
	}
	
	.loop-body{
		margin-top: 15upx;
		display: flex;
	}
	.loop-body-left{
		width: 120upx;
		height: 120upx;
		background-color: #cccccc;
	}
	.loop-body-right{
		flex: 1;
		margin-left: 20upx;
	}
	.loop-body-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		margin-top: 10upx;
	}
	.lltem-title{
		color: #333;
		font-size: 28upx;
		font-weight: 600;
	}
	
	.lltem-money{
		color: red;
		font-size: 28upx;
	}
	.loop-footer{
		margin-top: 10upx;
		display: flex;
		align-items: center;
		
	}
	.footer-text-box{
		padding-left: 20upx;
		font-size: 24upx;
		color: #333;
		font-weight: 500;
	}
	.bt-box{
		display: flex;
		padding: 20upx;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
	}
	
	.bt-item-box{
		display: flex;
		align-items: center;
	}
	
	
	
	.bt-item-3{
		width: 600upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background-color: red;
		color: #fff;
		border-radius: 10upx;
		font-size: 24upx;
	}
	
	
	.action-box{
		display: flex;
		background-color: #efefef;
		border-radius: 15upx;
		align-items: center;
		padding: 10upx;
		box-sizing: border-box;
	}
	
	.icon-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10upx 30upx;
	}
	
	.icon-title{
		font-size: 20upx;
		color: #333;
	}
	
	.icon-fix{
		width:2upx;
		height: 60upx;
		border-right: 1px solid #aaa;
	}
	
	.bt-action-box{
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	
	.bt-action-item{
		width: 340upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background-color: red;
		color: #fff;
		border-radius: 10upx;
		font-size: 24upx;
		
	}
	.bt-item-1-box{
		width: 300upx;
		height: 60upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #efefef;
		color: #333;
		border-radius: 10upx;
		font-size: 24upx;
	}
	
	.bt-item-1{
		display: flex;
		align-items: center;
	}
	.bt-item-2{
		width: 300upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		background-color: red;
		color: #fff;
		border-radius:10upx;
		font-size: 24upx;
	}
	
	.bz-text-box{
		margin-top: 10upx;
		background-color: #efefef;
		border-radius: 8upx;
		display: flex;
		align-items: center;
	
		color: red;
		font-size: 20upx;
		padding: 10upx 16upx;
		
	}
	
	.details-text-default-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.details-text-title{
		font-size: 26upx;
		font-weight: 600;
		color: #333;
	}
	
	.details-text{
		font-size: 24upx;
		color:#666;
	}
	
	.liuceng-box{
		box-sizing: border-box;
		padding: 20upx 40upx;
		border-radius: 10upx;
		background-color: #efefef;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		font-size: 24upx;
		color: #666;
	}
	
	.liuceng-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		
	}
	.liuceng-icon{
		padding-top: 8upx;
		box-sizing: border-box;
	}
	
	.clink{
		color: #4169E1
	}
	.cred{
		color: red;
	}
	
	.bottom-box{
		position: fixed;
		bottom: 0;
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10upx 120upx;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 24upx;
		color:#111;
	}
	
	.bottom-item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bottom-item-fix{
		width: 4upx;
		height: 40upx;
		border-right: 1px solid #aaa;
	}
	
	.top-box{
		display: flex;
		border-bottom: 1px solid #efefef;
		padding: 20upx 0;
		font-size: 32upx;
	}
	
	
</style>